<template>
    <div class="container">
        <el-menu :default-active="activeIndex"
                 class="el-menu-demo"
                 mode="horizontal"
                 @select="handleSelect">
            <el-menu-item index="gsxz">折扣类型</el-menu-item>
        </el-menu>
        <!-- <div v-show="activeIndex == 1"> -->
        <div class="handle-box">
            <el-button type="primary"
                       icon="el-icon-document-add"
                       size="medium"
                       @click="createSelect">新建</el-button>
        </div>
        <el-table :data="selectList"
                  border
                  class="table"
                  ref="multipleTable"
                  header-cell-class-name="table-header"
                  >
            <!-- <el-table-column type="selection"
                               width="60"
                  align="center"></el-table-column>-->
            <el-table-column label="序号"
                             align="center">
                <template scope="scope">
                    <span>{{scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="title"
                             label="类别名称"
                             align="center"></el-table-column>
            <el-table-column label="操作"
                             width="180"
                             align="center">
                <template slot-scope="scope">
                    <el-button type="text"
                               icon="el-icon-edit"
                               @click="selectEdit(scope.row)">编辑</el-button>
                    <el-button type="text"
                               icon="el-icon-delete"
                               class="red"
                               @click="selectDel(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--公司性质弹框-->
        <el-dialog :title="dialogTitle"
                   :visible.sync="editVisible1"
                   width="30%">
            <div class="list-group">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <div class="list-title">折扣类别名称:</div>
                    </el-col>
                    <el-col :span="18">
                        <el-input v-model="selectTitle"
                                  placeholder="请输入折扣类别名称"></el-input>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer"
                  class="dialog-footer">
        <el-button @click="editVisible1 = false">取消</el-button>
        <el-button type="primary"
                   @click="saveEdit">保存</el-button>
      </span>
        </el-dialog>

        <!--公司形态弹框-->
        <!-- <el-dialog title="公司形态下拉选择框"
                   :visible.sync="editVisible2"
                   width="30%">
          <div class="list-group">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="list-title">字段编号:</div>
              </el-col>
              <el-col :span="18">
                <el-input v-model="selectTitle"
                          placeholder="请输入字段编号"></el-input>
              </el-col>
            </el-row>
          </div>
          <span slot="footer"
                class="dialog-footer">
            <el-button @click="editVisible2 = false">取 消</el-button>
            <el-button type="primary"
                       @click="saveEdit">确 定</el-button>
          </span>
            </el-dialog>-->
    </div>
</template>

<script>
    import api from '@/api/index';
    export default {
        name: 'discountDetail',
        data () {
            return {
                editVisible1: false,
                //   editVisible2: false,
                //   editVisible3: false,
                //   editVisible4: false,
                activeIndex: 'gsxz',
                input: '',
                query: {
                    address: '',
                    name: '',
                    pageIndex: 1,
                    pageSize: 10
                },
                selectList: [],
                multipleSelection: [],
                delList: [],
                editVisible: false,
                pageTotal: 0,
                form: {},
                idx: -1,
                id: -1,
                selectTitle: '',
                selectId: '',
                clickType: 1,
                selectType: 'gsxz',
                dialogTitle: '编辑'
            };
        },
        mounted () {
            this.initselectList();
        },
        methods: {
            //点击切换tabbar
            handleSelect (key, keyPath) {
                console.log(key, keyPath);
                this.activeIndex = key;
                this.selectType = key;
                this.initselectList()
            },
            //列表加载
            initselectList () {
                const loading = this.$loading({ text: '加载中...' });
                this.$http.post(api.CONTRACT_DISCOUNTTYPE_GETLIST)
                    .then((res) => {
                        loading.close();
                        console.log('下拉选择列表', res)
                        if (res.code == 1) {
                            this.selectList = res.data;
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.$message.error(err.msg);
                    })
            },
            //点击编辑
            selectEdit (data) {
                this.dialogTitle = '编辑'
                this.clickType = 2;
                this.editVisible1 = true;
                this.selectTitle = data.contract_name;
                this.selectId = data.id;
            },
            //点击新增
            createSelect () {
                this.dialogTitle = '新增'
                this.clickType = 1;
                this.editVisible1 = true;
                this.selectTitle = '';
            },
            //弹框保存按钮
            saveEdit () {
                if (this.selectTitle == '' || !this.selectTitle) {
                    this.$message.error('请填写字段名称');
                    return false;
                }
                //编辑
                if (this.clickType == 2) {
                    this.$http.post(api.CONTRACT_DISCOUNTTYPE_EDIT, {id: this.selectId, contract_name: this.selectTitle })
                        .then((res) => {
                            console.log('编辑', res)
                            if (res.code == 1) {
                                this.editVisible1 = false;
                                this.initselectList();
                                this.$message({
                                    message: '编辑成功',
                                    type: 'success'
                                });
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            this.$message.error(err.msg);
                        })
                }
                //新增
                if (this.clickType == 1) {
                    this.$http.post(api.CONTRACT_DISCOUNTTYPE_ADD, {title: this.selectTitle })
                        .then((res) => {
                            console.log('新增', res)
                            if (res.code == 1) {
                                this.editVisible1 = false;
                                this.initselectList();
                                this.$message({
                                    message: '新增成功',
                                    type: 'success'
                                });
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            this.$message.error(err.msg);
                        })
                }
                //   if (this.clickType == 1) {
                //     this.addExhibition()
                //   } else {
                //     this.editExhibition()
                //   }
            },
            //删除
            selectDel (data) {
                console.log(data)
                console.log(this.selectType)
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                })
                    .then(() => {
                        this.$http.post(api.CONTRACT_DISCOUNTTYPE_DEL, {id: data.id })
                            .then((res) => {
                                console.log('删除', res)
                                if (res.code == 1) {
                                    this.initselectList();
                                    this.$message({
                                        message: '删除成功',
                                        type: 'success'
                                    });
                                } else {
                                    this.$message.error(res.msg);
                                }
                            })
                            .catch((err) => {
                                this.$message.error(err.msg);
                            })
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
            },
            //删除api
            // delExhibition (id) {
            //   const loading = this.$loading({ text: '加载中...' });
            //   this.$http.post(api.EXHIBITION_TYPE_DEL, { id: id })
            //     .then((res) => {
            //       loading.close();
            //       console.log('管理员列表', res)
            //       if (res.code == 1) {
            //         this.$message.success('删除成功');
            //         this.initAjaxMethod();
            //       } else {
            //         this.$message.error(res.msg);
            //       }
            //     })
            //     .catch((err) => {
            //       this.$message.error(err.msg);
            //     })
            // },
            // 多选操作
            handleSelectionChange (val) {
                this.multipleSelection = val;
            },
            delAllSelection () {
                const length = this.multipleSelection.length;
                let str = '';
                this.delList = this.delList.concat(this.multipleSelection);
                for (let i = 0; i < length; i++) {
                    str += this.multipleSelection[i].name + ' ';
                }
                this.$message.error(`删除了${str}`);
                this.multipleSelection = [];
            },
        }
    };
</script>

<style scoped>
    .handle-box,
    .list-group {
        padding: 10px 0;
    }
    .list-title {
        height: 32px;
        line-height: 32px;
    }
    .red {
        color: #f56c6c;
    }
</style>
